<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账单支付 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-nav-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-nav-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 88px); /* 状态栏 + 导航栏的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .tab-item {
            padding: 12px 0;
            font-size: 15px;
            font-weight: 500;
            color: #6b7280;
            text-align: center;
            position: relative;
        }
        
        .tab-item.active {
            color: #3b82f6;
            font-weight: 600;
        }
        
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #3b82f6;
            border-radius: 3px;
        }
        
        .tab-item.dark {
            color: #9ca3af;
        }
        
        .tab-item.active.dark {
            color: #60a5fa;
        }
        
        .tab-item.active.dark::after {
            background-color: #60a5fa;
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-badge-green {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        .status-badge-yellow {
            background-color: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }
        
        .status-badge-red {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .status-badge-green.dark {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .status-badge-yellow.dark {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .status-badge-red.dark {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .payment-method {
            border: 2px solid transparent;
            border-radius: 12px;
            padding: 12px;
            transition: all 0.2s ease;
        }
        
        .payment-method.selected {
            border-color: #3b82f6;
            background-color: rgba(59, 130, 246, 0.05);
        }
        
        .payment-method.dark.selected {
            border-color: #60a5fa;
            background-color: rgba(59, 130, 246, 0.1);
        }
        
        .bill-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .bill-item.dark {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .bill-item:last-child {
            border-bottom: none;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-nav-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .tab-item {
            color: #9ca3af;
        }
        
        .dark-mode .tab-item.active {
            color: #60a5fa;
        }
        
        .dark-mode .tab-item.active::after {
            background-color: #60a5fa;
        }
        
        .dark-mode .status-badge-green {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .dark-mode .status-badge-yellow {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .dark-mode .status-badge-red {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .dark-mode .payment-method.selected {
            border-color: #60a5fa;
            background-color: rgba(59, 130, 246, 0.1);
        }
        
        .dark-mode .bill-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- iOS 导航栏 -->
        <div class="ios-nav-bar">
            <div class="flex justify-between items-center w-full">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left text-blue-500 dark:text-blue-400 mr-2"></i>
                    <span class="text-gray-800 dark:text-gray-200">返回</span>
                </div>
                <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">账单支付</div>
                <div class="w-16"></div> <!-- 占位，保持标题居中 -->
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 选项卡 -->
            <div class="bg-white dark:bg-gray-800 border-t border-b border-gray-200 dark:border-gray-700">
                <div class="flex">
                    <div class="tab-item active flex-1">待缴费</div>
                    <div class="tab-item flex-1">已缴费</div>
                    <div class="tab-item flex-1">全部账单</div>
                </div>
            </div>
            
            <!-- 账单汇总 -->
            <div class="px-4 pt-4 pb-3">
                <div class="glass-card p-5">
                    <div class="text-center mb-3">
                        <div class="text-sm text-gray-500 dark:text-gray-400">本月待缴总额</div>
                        <div class="text-3xl font-bold text-gray-800 dark:text-gray-200 mt-1">¥1,258.50</div>
                    </div>
                    <button class="w-full py-2.5 bg-blue-500 dark:bg-blue-600 text-white font-medium rounded-full">
                        一键缴费
                    </button>
                </div>
            </div>
            
            <!-- 账单列表 -->
            <div class="px-4 pt-2 pb-4">
                <h2 class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-3">待缴费账单</h2>
                
                <!-- 水费账单 -->
                <div class="glass-card overflow-hidden mb-4">
                    <div class="p-4 bill-item">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
                                    <i class="fas fa-tint text-blue-500 dark:text-blue-400"></i>
                                </div>
                                <div>
                                    <div class="text-base font-medium text-gray-800 dark:text-gray-200">水费</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">2023年11月</div>
                                </div>
                            </div>
                            <div class="status-badge status-badge-red">待缴费</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">用量: 8.5吨</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">单价: ¥5.2/吨</div>
                            </div>
                            <div>
                                <div class="text-lg font-bold text-gray-800 dark:text-gray-200">¥44.20</div>
                                <button class="mt-1 px-3 py-1 bg-blue-500 dark:bg-blue-600 text-white text-xs rounded-full">
                                    缴费
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 电费账单 -->
                    <div class="p-4 bill-item">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3">
                                    <i class="fas fa-bolt text-yellow-500 dark:text-yellow-400"></i>
                                </div>
                                <div>
                                    <div class="text-base font-medium text-gray-800 dark:text-gray-200">电费</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">2023年11月</div>
                                </div>
                            </div>
                            <div class="status-badge status-badge-red">待缴费</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">用量: 320度</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">单价: ¥0.65/度</div>
                            </div>
                            <div>
                                <div class="text-lg font-bold text-gray-800 dark:text-gray-200">¥208.00</div>
                                <button class="mt-1 px-3 py-1 bg-blue-500 dark:bg-blue-600 text-white text-xs rounded-full">
                                    缴费
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 物业费账单 -->
                    <div class="p-4 bill-item">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
                                    <i class="fas fa-building text-green-500 dark:text-green-400"></i>
                                </div>
                                <div>
                                    <div class="text-base font-medium text-gray-800 dark:text-gray-200">物业费</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">2023年第四季度</div>
                                </div>
                            </div>
                            <div class="status-badge status-badge-red">待缴费</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">面积: 120㎡</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">单价: ¥2.8/㎡/月</div>
                            </div>
                            <div>
                                <div class="text-lg font-bold text-gray-800 dark:text-gray-200">¥1,008.00</div>
                                <button class="mt-1 px-3 py-1 bg-blue-500 dark:bg-blue-600 text-white text-xs rounded-full">
                                    缴费
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <h2 class="text-base font-semibold text-gray-800 dark:text-gray-200 mt-6 mb-3">缴费方式</h2>
                
                <!-- 缴费方式选择 -->
                <div class="glass-card p-4 mb-4">
                    <div class="grid grid-cols-3 gap-3">
                        <div class="payment-method selected">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-2">
                                    <i class="fab fa-alipay text-2xl text-blue-500 dark:text-blue-400"></i>
                                </div>
                                <div class="text-xs text-gray-800 dark:text-gray-200">支付宝</div>
                            </div>
                        </div>
                        <div class="payment-method">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-2">
                                    <i class="fab fa-weixin text-2xl text-green-500 dark:text-green-400"></i>
                                </div>
                                <div class="text-xs text-gray-800 dark:text-gray-200">微信支付</div>
                            </div>
                        </div>
                        <div class="payment-method">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mb-2">
                                    <i class="fas fa-credit-card text-xl text-red-500 dark:text-red-400"></i>
                                </div>
                                <div class="text-xs text-gray-800 dark:text-gray-200">银行卡</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 缴费记录 -->
                <h2 class="text-base font-semibold text-gray-800 dark:text-gray-200 mt-6 mb-3">近期缴费记录</h2>
                <div class="glass-card overflow-hidden">
                    <div class="p-4 bill-item">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                    <i class="fas fa-file-invoice text-gray-500 dark:text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="text-base font-medium text-gray-800 dark:text-gray-200">水电费</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">2023年10月</div>
                                </div>
                            </div>
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">¥256.80</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 text-right">已缴费</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 bill-item">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                    <i class="fas fa-file-invoice text-gray-500 dark:text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="text-base font-medium text-gray-800 dark:text-gray-200">停车费</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">2023年10月</div>
                                </div>
                            </div>
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">¥300.00</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 text-right">已缴费</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                    <i class="fas fa-file-invoice text-gray-500 dark:text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="text-base font-medium text-gray-800 dark:text-gray-200">物业费</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">2023年第三季度</div>
                                </div>
                            </div>
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">¥1,008.00</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 text-right">已缴费</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .payment-method, .bill-item').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .payment-method, .bill-item').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .payment-method, .bill-item').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
        
        // 支付方式选择
        document.querySelectorAll('.payment-method').forEach(method => {
            method.addEventListener('click', () => {
                document.querySelectorAll('.payment-method').forEach(m => {
                    m.classList.remove('selected');
                });
                method.classList.add('selected');
            });
        });
    </script>
</body>
</html> 